<template>
  <div>
    <el-row :gutter="20">
       <el-col :span="24">
        <el-card class="box1" style="height: 64px" shadow="never">
          <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="工单编号:">
          <el-input
            v-model="pageParams.name"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
          </el-card>
      </el-col>
         <el-col :span="24">
        <el-card class="box2" shadow="never">
      <div class="button">
      <el-button type="primary" @click="isshow = true" icon="el-icon-circle-plus-outline" style="background-color:#ff772f;border:none ">新建</el-button>
      </div>
      <el-table
      :data="tableData"
      style="width: 100%"
      >
      <el-table-column
        type="index"
        label="序号"
        width="80"

        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="合作商名称"
        >
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
      >
      </el-table-column>
      <el-table-column
        prop="vmCount"
        label="设备数量"
        >
      </el-table-column>
      <el-table-column
        label="分成比例"
        >
        <template v-slot="{row}">
          <span>{{`${row.ratio}%`}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="contact"
        label="联系人"
        >
      </el-table-column>
       <el-table-column
        prop="mobile"
        label="联系电话"
        >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作">
        <template v-slot="{ row }">
          <el-button type="text" @click="resetting(row.id)" size="mini">重置密码</el-button>
       <el-button type="text" @click="xqlist(row.id)" size="mini">查看详情</el-button>
       <el-button type="text" @click="xglist(row.id)" size="mini">修改</el-button>
       <el-button size="mini" @click="delPartner(row.id)" class="el-button-danger" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <div v-if="totalCount > 10" class="box2box" >
     <div><span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span></div>
     <div class="buttonan">
      <el-button type="info" @click="previousPage">上一页</el-button>
      <el-button type="info" @click="nextPage">下一页</el-button>
      </div>
   </div>
        </el-card>
       </el-col>
    </el-row>
    <!-- 新增 -->
    <el-dialog title="新增区域" :visible="isshow" width="630px" @close="closeFn">
  <el-form ref="addform" :model="form" :rules="rules" label-width="120px">
    <el-form-item label="合作商名称:" prop="name" >
      <el-input
      v-model="form.name"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="10"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="联系人:" prop="contact" >
      <el-input
      v-model="form.contact"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="10"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="联系电话:" prop="mobile" >
      <el-input
      v-model="form.mobile"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="11"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="分成比例(%):" prop="ratio" >
        <el-input-number
        v-model="form.ratio"
        controls-position="right"
         style="width:396px"
          placeholder="请输入"
         :min="0" :max="10">
         </el-input-number>
    </el-form-item>
       <el-form-item label="账号:" prop="account" >
      <el-input
      v-model="form.account"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="18"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="密码:" prop="password" >
      <el-input
      v-model="form.password"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="20"
      show-word-limit
      >
     </el-input>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button  @click="closeFn"  class="el-buttonxx">取 消</el-button>
              <el-button class="el-buttonx" @click="submit">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>
<!-- 点击 -->
 <el-dialog
  :visible="centerDialogVisible"
  width="30%"
  center
  >
  <p class="wenzhi">确定要重置合作商嘛？</p>
  <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="xzquandian">确 定</el-button>
  </span>
</el-dialog>
<!-- 查看详情 -->
 <el-dialog title="合作商详情" :visible.sync="dialogFormVisible" custom-class="el-dialog" width="630px">
          <el-form :model="formxx">
            <el-row>
              <el-col :span="12">
                <el-form-item label="合作商名称：">
                <div>{{formxx.name}}</div>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <el-form-item label="联系人：">
                <div>{{formxx.contact}}</div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话：">
                <div>{{formxx.mobile}}</div>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="分成比例：">
                <div>{{formxx.ratio}}%</div>
              </el-form-item>
              </el-col>

            </el-row>
          </el-form>

        </el-dialog>
<!-- 点击修改 -->
 <el-dialog title="修改合作商" :visible.sync="isshowxx" width="630px">
  <el-form ref="addform" :model="formlist" :rules="rules" label-width="120px">
    <el-form-item label="合作商名称:" prop="name" >
      <el-input
      v-model="formlist.name"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="10"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="联系人:" prop="contact" >
      <el-input
      v-model="formlist.contact"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="10"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="联系电话:" prop="mobile" >
      <el-input
      v-model="formlist.mobile"
      autocomplete="off"
      placeholder="请输入"
      style="width:396px"
      maxlength="11"
      show-word-limit
      >
     </el-input>
    </el-form-item>
       <el-form-item label="分成比例(%):" prop="ratio" >
        <el-input-number
        v-model="formlist.ratio"
        controls-position="right"
         style="width:396px"
          placeholder="请输入"
         :min="0" :max="100">
         </el-input-number>
    </el-form-item>
     <el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="12">
              <el-button @click="isshowxx = false" class="el-buttonxx">取 消</el-button>
              <el-button @click="xgpartnerlist" class="el-buttonx">确 认</el-button>
            </el-col>
          </el-row>
        </el-form-item>
  </el-form>
</el-dialog>
  </div>
</template>

<script>
import { getpartner, addPartner, resettingPartner, xgPartnerlist, delPortnerList } from '@/api/partner'
export default {
  data () {
    return {
      isshowxx: false,
      dialogFormVisible: false,
      centerDialogVisible: false,
      isshow: false,
      form: {
        name: '',
        contact: '',
        mobile: '',
        ratio: '',
        account: '',
        password: ''
      },
      rules: {
        name: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1\d{10}$/, message: '请输入手机号', trigger: 'blur' }
        ],
        ratio: [
          { required: true, message: '不能为空哦', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入6-18位哦', trigger: 'blur' },
          { min: 6, max: 16, message: '请输入6-18位哦', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入6-18位哦', trigger: 'blur' },
          { min: 6, max: 16, message: '请输入6-18位哦', trigger: 'blur' }
        ]

      },
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        name: ''
      },
      tableData: [],
      totalCount: '',
      pageIndex: '',
      totalPage: '',
      czid: '',
      formxx: {},
      formlist: {

      }
    }
  },
  created () {
    this.getpartner()
  },
  methods: {
    // 删除

    async delPartner (id) {
      try {
        await delPortnerList(id)
        this.$message.success('删除成功了哦~')
        this.getpartner()
      } catch (error) {
        // console.log(error)
        this.$message.success(error.message)
      }
    },
    // 点击确定
    async xgpartnerlist () {
      await xgPartnerlist({ ...this.formlist })
      this.$message.success('修改成功了哦~')
      this.getpartner()
    },
    // 点击修改
    xglist (id) {
      this.tableData.forEach(item => {
        if (item.id === id) {
          this.formlist = item
          // console.log(item)
        }
      })
      this.isshowxx = true
    },
    // 点击详情
    xqlist (id) {
      this.tableData.forEach(item => {
        if (item.id === id) {
          this.formxx = item
          // console.log(item)
        }
      })
      this.dialogFormVisible = true
    },
    // 点击确定
    async xzquandian () {
      await resettingPartner(this.czid)
      this.$message.success('重置成功了哦~')
      this.centerDialogVisible = false
    },
    // 点击重置密码
    resetting (id) {
      this.centerDialogVisible = true
      this.czid = id
    },
    // 渲染页面
    async getpartner () {
      const res = await getpartner({ ...this.pageParams })
      this.tableData = res.data.currentPageRecords
      // console.log(this.tableData)
      this.totalCount = res.data.totalCount
      this.pageIndex = res.data.pageIndex
      this.totalPage = res.data.totalPage
    },
    // 点击搜索x
    onSubmit () {
      this.getpartner()
    },
    // 点击x
    closeFn () {
      this.isshow = false
      this.$refs.addform.resetFields()
    },
    // 点击添加确定
    async submit () {
      this.$refs.addform.validate()
      await addPartner({ ...this.form })
      this.$message.success('新增成功了哦~')
      this.getpartner()
      this.isshow = false
    },
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.getpartner()
    },
    nextPage () {
      if ((this.totalCount / 10) < this.pageParams.pageIndex) {
        return this.$message.warning('已经是最后一页了')
      }
      this.pageParams.pageIndex++
      this.getpartner()
    }
  }
}

</script>

<style lang="less" scoped>
.box1 {
  margin-bottom: 20px;
}
form {
  margin-top: -7px;
}
.el-button-danger {
  color: #FF5A5A;
}
.el-buttonxx {
  background-color: #FBF4F0;
}
.el-buttonx {
  background-color: #FF8739;
}
.box2box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 96px;
  width: 100%;
  height: 96px;
  span {
        font-size: 16px!important;
    color: #dbdfe5!important;
  }
}
.wenzhi {
  text-align: center;
}

</style>
